<template>
	<div class="date_select flex">
		<div @click="changeDate(0)">
			<slot name="left">
				<img src="@/../static/img/icon31.png" alt="" style="margin: 0 2rem;">
			</slot>
		</div>
		<slot name="content">
			<div @click="showSelect">
				{{option.defaultValue.join(join)}}
			</div>
		</slot>
		<div @click="changeDate(1)">
			<slot name="right">
				<img src="@/../static/img/icon32.png" alt="" style="margin: 0 2rem;">
			</slot>
		</div>
		<my-select :option="option" v-if="selectDate" ref="selectDate" @on-change="change"></my-select>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	export default {
		props: {
			defaultTime: {
				type: Array,
				default: () => [],
			},
			step: {
				type: Number,
				default: 1
			},
			join: {
				type: String,
				default: '-'
			},
			disabledDate: {
				type: [Date, Boolean, String],
				default: false,
			},
		},
		components: {
			mySelect
		},
		data() {
			return {
				selectDate: false,
				option: {
					defaultValue: []
				},
			}
		},
		watch: {
			defaultTime(val) {
				this.option.defaultValue = val;
			}
		},
		methods: {
			getMonthWeek(a, b, c) {
				/**
				 * a = d = 当前日期
				 * b = 6 - w = 当前周的还有几天过完(不算今天)
				 * a + b 的和在除以7 就是当天是当前月份的第几周
				 */
				let date = new Date(a, parseInt(b) - 1, c),
					w = date.getDay(),
					d = date.getDate();
				if (w == 0) w = 7;
				let config = {
					getMonth: date.getMonth() + 1,
					getYear: date.getFullYear(),
					getWeek: Math.ceil((d + 6 - w) / 7),
				}
				return config;
			},
			showSelect() { //显示时间选择框
				this.selectDate = true;
				this.$nextTick(() => {
					this.$refs.selectDate.showDatePicker();
				})
			},
			change(date) { //时间选择回调
				let month = date[1].value;
				let day = date[2].value;
				this.option.defaultValue = [date[0].value, this.fix2(month), this.fix2(day)];
				this.selectDate = false;
				this.$emit('onchange', this.option.defaultValue)
			},
			gotoDate(year, month, date) {
				this.option.defaultValue = [year, month, date];
			},
			changeDate(type) { //前一天后一天
				let str = this.option.defaultValue.join('-');
				let ms = new Date(str).getTime();
				if (type) ms += this.step * 86400000;
				else ms -= this.step * 86400000;

				if (this.disabledDate != false) {
					let disabledDate = new Date(this.disabledDate).getTime();
					if (ms > disabledDate) {
						this.$weui.topTips('所选日期不能超过当天');
						return
					}
				}

				let time = new Date(ms);
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let date = time.getDate();
				this.option.defaultValue = [year, this.fix2(month), this.fix2(date)];
				this.$emit('onchange', this.option.defaultValue)
				let getDate = this.getMonthWeek(year, month, date);
				this.$emit('getWeek', getDate)
			},
			fix2(val) {
				if (val < 10) return '0' + val
				else return val
			},
		},
		created() {
			if (this.defaultTime.length) {
				this.option.defaultValue = this.defaultTime;
			} else {
				let time = new Date();
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let date = time.getDate();
				this.option.defaultValue = [year, this.fix2(month), this.fix2(date)];
			}
		}
	}
</script>

<style scoped>
	.date_select {
		font-size: 1.4rem;
		margin: 1rem 0;
		justify-content: center;
		align-content: center;
	}

	.date_select img {
		height: 1.4rem;
	}
</style>
